<template>
  <div>
    <div class="header">
      <div @click="handleBack">返回</div>
      <div>{{ kindname }}</div>
    </div>
    <div class="list">
      <MusicItem
        v-for="item of arrList"
        :key="item.id"
        :item="item"
        @click.native="handleDetail(item.id)"
      ></MusicItem>
    </div>
  </div>
</template>

<script>
import MusicItem from "./components/Item.vue";

export default {
  components: {
    MusicItem,
  },
  data() {
    return {
      arrList: [],
      kindname: "",
    };
  },
  methods: {
    handleBack() {
      this.$router.back();
    },
    handleDetail(val) {
      this.$router.push(`/music/detail?id=${val}`);
    },
  },
  mounted() {
    var { kind } = this.$route.query;
    this.kindname = kind;
    if (kind == "hot") {
      this.$http("http://47.108.197.28:3000/top/playlist/highquality").then(
        (res) => {
          this.arrList = res.data.playlists;
        }
      );
    } else if (kind == "new") {
      this.$http("http://47.108.197.28:3000/album/newest").then((res) => {
        res.data.albums.forEach((item) => {
          item.coverImgUrl = item.blurPicUrl;
          item.playCount = item.id;
        });
        this.arrList = res.data.albums;
      });
    } else if (kind == "dj") {
      this.$http("http://47.108.197.28:3000/personalized/djprogram").then(
        (res) => {
          res.data.result.forEach((item) => {
            item.coverImgUrl = item.picUrl;
            item.playCount = item.id;
          });
          this.arrList = res.data.result;
        }
      );
    }
  },
};
</script>

<style scoped>
.list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.header {
  display: flex;
  align-items: center;
  height: 80px;
  font-size: 32px;
  padding: 0 2px;
  border-bottom: 1px solid #aaa;
}
.header > div:nth-child(2) {
  margin-left: 280px;
  font-size: 38px;
}
</style>